<template>
  <div class="bigbody">
    <MySearch @parentSearchfun="parentSearch" @openDialog='openDialog'/>
    <MyTable :arr="arr" @resetable="getLocalHost" @openDialog="updateopenDialog"/>
    <MyPagize :page='page' :pageSize='pageSize' :total='total' @pageSizechange="pageSizechange" @pageChange='pageChange'/>
    <MyDialog  :dialogType="dialogType" :dialogRow="dialogRow" @closeDialog="closeDialog"  v-if='show' @resetTable="parentReset" />
</div>
</template>

<script>
import MySearch from "./components/MySearch.vue";
import MyTable from "./components/MyTable.vue";
import MyPagize from "./components/MyPagize.vue";

import { gethomeData } from "../../api/home";
import MyDialog from "./components/MyDialog.vue";
export default {
  components: { MySearch, MyTable, MyPagize, MyDialog },
  mounted() {
    this.getLocalHost(); 
  },
  data() {
    return {
      arr: [],
      search: "",
      show:false,
      dialogRow:{},
      dialogType:0,
      page:1,
      pageSize:10,
      total:0
    };
  },
  methods: {
    pageChange(val){
      this.page=val
      this.getLocalHost();
      console.log(val);
    },
    pageSizechange(val){
     this.pageSize=val
     this.page=1
     this.getLocalHost();
    },
    updateopenDialog(row){
      this.dialogRow=row
      this.dialogType=1
        this.show=true
    },
    parentReset(){
       this.getLocalHost();
       this.show=false
    },
    closeDialog(){
       this.show=false
    },
    openDialog(){
      this.dialogType=0
    this.show=true
    },
    parentSearch(val) {
      this.search = val, 
      this.getLocalHost();
    },
    getLocalHost() {
      var params={ search: this.search ,page:this.page,pageSize:this.pageSize}
      gethomeData(params).then((res) => {
     
        if (res.code == 200) {
          console.log(res);
          this.arr = res.data;
          this.total=res.total
        }
      });
    },
  },
};
</script>

<style scoped>
.bigbody {
  background-color: white;
  line-height: 30px;
}


</style>